import React from 'react';
import ReactDOM from 'react-dom'
import './confirm.less';

class Confirm extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Confirm';
        this.state = {
            visible:false,
            yesBtn:"确定",
            noBtn:"取消"
        }
        Confirm.show = this.show.bind(this)
    }
    _confirm(){/*获取外部confirm方法*/}
    _cancel(){/*获取外部cancel方法*/}
    handleCancel(){
        this.close()
        this._cancel()
    }
    handleConfirm(){
        this.close()
        this._confirm()
    }
    show(obj){
        var { title, text, cancel, confirm, yes, no } = obj
        this.setState({
            visible:true,
            title:title,
            text:text,
            yesBtn:confirm||yes?(yes||"确定"):null,
            noBtn:cancel||no?(no||"取消"):null
        })
        this._cancel=cancel||function(){}
        this._confirm=confirm||function(){}
    }
    close(){
        this.setState({
            visible:false
        })
    }
    render() {
        var { height, width } = this.props
        var { visible, yesBtn, noBtn, text, title } = this.state
        var height=this.props.height
        var width=this.props.width
        return visible?<div className="tederen-confirm">
            <div className="modal-container" style={{
                width: width+"px",
                height: height+"px",
                marginTop: -height/2+"px",
                marginRight: -width/2+"px"}
                }>
                <div className="modal-head"><div className="modal-title">{title}</div></div>
                <div className="modal-body">{text}</div>
                <div className="modal-bottom">
                    {noBtn?<input className="btn-cancel" type="button" value={noBtn} onClick={this.handleCancel.bind(this)}/>:null}
                    {yesBtn?<input className="btn-confirm" type="button" value={yesBtn} onClick={this.handleConfirm.bind(this)}/>:null}
                </div>
            </div>
            <div className="confirm-mask"></div>
        </div>:null
    }
}

Confirm.defaultProps={
    width: 400,
    height: 200,
}

export default Confirm
